<template>
  <div style="padding:20px 250px">
    <div id="pie"></div>
  </div>
</template>

<script>
import * as G2 from "@antv/g2";
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    initCharts() {
      const data = [
        { item: "事例一", count: 40, percent: 0.4 },
        { item: "事例二", count: 21, percent: 0.21 },
        { item: "事例三", count: 17, percent: 0.17 },
        { item: "事例四", count: 13, percent: 0.13 },
        { item: "事例五", count: 9, percent: 0.09 },
      ];

      const chart = new G2.Chart({
        container: "pie",
        autoFit: true,
        height: 500,
      });

      chart.coordinate("theta", {
        radius: 0.75,
      });

      chart.data(data);

      chart.scale("percent", {
        formatter: (val) => {
          val = val * 100 + "%";
          return val;
        },
      });

      chart.legend({
        position: "right-top",
      });

      // chart.tooltip({
      //   showTitle: false,
      //   showMarkers: false,
      // });

      chart.tooltip({
        showTitle: false,
        showMarkers: false,
        containerTpl:
          '<div class="g2-tooltip">' +
          '<p class="g2-tooltip-title"></p>' +
          '<ul class="g2-tooltip-list"></ul>' +
          "</div>",
        itemTpl:
          '<li class="g2-tooltip-list-item">' +
          '<span class="g2-tooltip-marker"></span>' +
          '<span class="g2-tooltip-name">'+"{item}"+'</span>：'+
          "{count}"+'<br>'+
          '<span style="margin-left:10px;margin-top:5px;display:inline-block;" class="g2-tooltip-name">占比</span>：'+
          "{percent}"+
          '<span class="g2-tooltip-value"></span>' +
          "</li>",
        "g2-tooltip": {
          position: "absolute",
          visibility: "hidden",
          border: "1px solid #017DFF",
          backgroundColor: "rgba(5,21,43,0.90)",
          color: "white",
          padding: "0",
          opacity: "1",
          boxShadow: "0 0 10px 0 rgba(1,125,255,0.8)",
          transition: "top 200ms,left 200ms",
        }, // 设置 tooltip 的 css 样式
        "g2-tooltip-list": {
          margin: "10px",
        },
        "g2-tooltip-marker": {
          width: "0",
          height: "0",
        },
      });

      chart
        .interval()
        .position("percent")
        .color("item")
        .label("percent", {
          content: (data) => {
            return `${data.item}: ${data.percent * 100}%`;
          },
        })
        .tooltip('item*count*percent', function(item,count, percent) {
                    return {
                        item: item,
                        count: count,
                        percent:percent*100+'%'
                    };
                })
        .adjust("stack");

      chart.interaction("element-active");

      chart.render();
    },
  },
  mounted() {
    this.initCharts();
  },
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
